import React from 'react'
import router from 'umi/router'
import { connect } from 'dva'
import { formatterData } from '@/components/SiderMenu'
// import { Tabs } from 'antd'
import Tabs from './Tabs'

const prefixCls = 'fixed-tabs'

const renderTabs = ({
	tabList, tabActiveKey, onTabChange, tabBarExtraContent
}) => {
	return tabList && tabList.length ? (
		<Tabs
	      activeKey={tabActiveKey}
	      onChange={key => {
	      	router.push(key);
			if (onTabChange) {
				onTabChange(key)
			}
	      }}
	      tabBarExtraContent={tabBarExtraContent}
	    >
	      {tabList.map(item => (
	        <Tabs.TabPane tab={item.tab} key={item.key} />
	      ))}
	    </Tabs>
	) : null
}

const TabManager = ({
	children,
	...props
}) => {
	return (
		<div className={prefixCls}>
			<div className={`${prefixCls}-header`}>
				{renderTabs(props)}
			</div>
			<div className={`${prefixCls}-body`}>
				{children}
			</div>
		</div>
	)
}

const getTabRoutes = (...args) => formatterData(...args).map(route => {
        const {
            path,
            name
        } = route
        return {
            key: path,
            tab: name
        }
    })

@connect(({ app: { user = {} }}) => ({ user }))
class SimpleTabs extends React.Component {
	handleTabChange = key => {
		
	};
	render() {
		const {
			user: {
				authorities = []
			},
			// match,
			children,
			route: {
				routes
			},
			location: {
				pathname
			}
		} = this.props
		const tabList = getTabRoutes(routes, authorities)
		return (
			<TabManager 
				tabList={tabList}
		        // tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
		        tabActiveKey={pathname}
		        onTabChange={this.handleTabChange}
				>
				{children}
			</TabManager>
		)
	}
}

export default SimpleTabs